<template>
	<view style="background-color: #FAFAFA; height: 88vh;">
		<!-- <u--form style="background-color: white;" v-if="info!=null" labelPosition="left" :labelWidth="100" :labelStyle="{color:'#b3b3b3'}" :model="info"
			ref="uForm" class="form-style">
			<u-form-item label="类型" borderBottom ref="item1">
				<u--text align="right" :text="info.facilities_type_name"></u--text>
			</u-form-item>
			<u-form-item label="建设规模" borderBottom ref="item1">
				<u--text align="right" :text="info.facilities_scale+' '+this.unit"></u--text>
			</u-form-item>
			<u-form-item label="所属项目" borderBottom ref="item1">
				<u--text align="right" :text="info.xmmc"></u--text>
			</u-form-item>
			<u-form-item label="建设单位" borderBottom ref="item1">
				<u--text align="right" :text="info.jsdw"></u--text>
			</u-form-item>
			<u-form-item label="当前状态" borderBottom ref="item1">
				<u--text align="right" :text="dqzt[Number(info.dqzt)]"></u--text>
			</u-form-item>
			<u-form-item label="建设进展" borderBottom ref="item1">
				<u--text align="right" :text="info.jsjz"></u--text>
			</u-form-item>
		</u--form> -->
		<view class="content" style="background-color: #FFF;" v-if="info!=null">
			<div style="margin-top: 2px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">类型</view>
				<view slot="right-icon" class="contentText">{{info.facilities_type_name?info.facilities_type_name:''}}
				</view>
			</u-cell>
			<div style="margin: 5px 12px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">建设规模</view>
				<view slot="right-icon" class="contentText">{{info.facilities_scale+' '+this.unit}}</view>
			</u-cell>
			<div style="margin: 5px 12px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">所属项目</view>
				<text slot="right-icon"
					style="width:60vw; white-space: normal; word-wrap: break-word; text-align: right; font-size: 14px; line-height: 24px; color:  #212121;">{{ info.xmmc }}</text>
			</u-cell>
			<div style="margin: 5px 12px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">建设单位</view>
				<view slot="right-icon" class="contentText">{{info.jsdw}}</view>
			</u-cell>
			<div style="margin: 5px 12px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">当前状态</view>
				<view slot="right-icon" class="contentText">{{dqzt[Number(info.dqzt)]}}</view>
			</u-cell>
			<div style="margin: 5px 12px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">建设进展</view>
				<view slot="right-icon" class="contentText">{{info.jsjz}}</view>
			</u-cell>
			<div style="margin: 5px 12px;"><u-line></u-line></div>
			<u-cell :border="false">
				<view slot="title" class="titleText">导航</view>
				<view slot="right-icon" class="contentText">
					<u-icon name="map-fill" color="#FF5500" size="22" @click="showMap"></u-icon>
				</view>
			</u-cell>
		</view>
		
		<u-popup :show="showLocation" height="200px" mode="bottom" @close="closePopupLocation" round="10">
			<view>
				<view class="title" style="margin: 10px;">
					请选择
				</view>
				<view class="baidu" @click="gotoBaidu" style="display: flex;align-items: center;justify-content: space-between;padding: 10px;">
					<view class="baidu_left" style="display: flex;align-items: center;">
						<view class="baidu_icon" style="height: 32px;width: 32px;border: 2px solid #c8c9cc;border-radius: 4px;">
							<u--image :src="baiduIcon" width="32px" height="32px"></u--image>
						</view>
						<view style="margin-left: 20px;">百度地图</view>
					</view>
					<view class="baidu_right">
						<u--image :src="gotoIcon" width="22px"
						    height="22px"
						  ></u--image>
					</view>
				</view>
				<view class="gaode" @click="gotoGaode" style="display: flex;align-items: center;justify-content: space-between;padding: 10px;margin-bottom: 20px;">
					<view class="gaode_left" style="display: flex;align-items: center;">
						<view class="gaode_icon" style="height: 32px;width: 32px;border: 2px solid #c8c9cc;border-radius: 4px;">
							<u--image :src="gaodeIcon" width="32px" height="32px"></u--image>
						</view>
						<view style="margin-left: 20px;">高德地图</view>
					</view>
					<view class="gaode_right">
						<u--image :src="gotoIcon" width="22px"
						    height="22px"
						  ></u--image>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../../common/wst_hydra-1.0.0.js');

	import { wgs84ToGcj02, wgs84ToBd09 } from '@/common/coordinateUtils.js'
	import coordtransform from 'coordtransform';
	import {
		nextTick
	} from "vue";
	export default {
		props: ['info', 'unit'],
		data() {
			return {
				infoModel: this.info,
				dqzt: ["停用", "在用", "建设中"],
				
				showLocation:false,
				baiduIcon:require("@/static/assets/baidu.png"),
				gaodeIcon:require("@/static/assets/gaode.png"),
				gotoIcon:require("@/static/assets/goto.png"),
			}
		},
		onShow() {
			document.body.style.overflow = 'auto';
		},
		methods:{
			showMap(){
				if(this.info.xmmc && this.info.lng && this.info.lat){
					this.showLocation = true
				}else{
					uni.$u.toast("当前设施信息缺失无法前往导航")
				}
			},
			closePopupLocation(){
				this.showLocation = false
			},
			gotoBaidu(){
				const [bdLng, bdLat] = wgs84ToBd09(this.info.lng,this.info.lat)
				let temp = `name:${this.info.xmmc}|latlng:${bdLat},${bdLng}`
				croods.customPlugin({
					action: 'CustomJumpPlugin.goBaiduMap',
					params: {
						destination:temp,
					},
					success: function () {
						
					},
					fail: function (msg) {
					}
				});
			},
			gotoGaode(){
				const [gcjLng, gcjLat] = wgs84ToGcj02(this.info.lng,this.info.lat)
				let temp = `&dlat=${gcjLat}&dlon=${gcjLng}&dname=${this.info.xmmc}`
				croods.customPlugin({
					action: 'CustomJumpPlugin.goGaoDeMap',
					params: {
						destination:temp,
					},
					success: function () {
						
					},
					fail: function (msg) {
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.form-style {
		padding: 30rpx;
	}

	.titleText {
		font-family: 'PingFangSC-Regular';
		font-size: 14px;
		color: #b3b3b3;
		font-weight: 400;
	}

	.contentText {
		font-family: 'PingFangSC-Regular';
		font-size: 14px;
		color: #212121;
		text-align: right;
		font-weight: 400;
	}
</style>